<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="auto">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <template #label>{{ $t('code.generateTemplate') }}</template>
          <el-select filterable v-model="info.tplCategory" @change="tplSelectChange">
            <el-option :label="$t('code.singleTable')" value="crud" />
            <el-option :label="$t('code.treeTable')" value="tree" />
            <el-option :label="$t('code.masterTable')" value="sub" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="tplWebType">
          <template #label>{{ $t('code.uiType') }}</template>
          <el-select filterable v-model="info.tplWebType">
            <el-option label="Vue2 Element UI" value="element-ui" />
            <el-option label="Vue3 Element Plus" value="element-plus" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="packageName">
          <template #label>
            {{ $t('code.packagePath') }}
            <el-tooltip :content="$t('code.javaPackagePath')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <template #label>
            {{ $t('code.modulePath') }}
            <el-tooltip :content="$t('code.modulePathExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <template #label>
            {{ $t('code.businessName') }}
            <el-tooltip :content="$t('code.businessNameExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <template #label>
            {{ $t('code.functionName') }}
            <el-tooltip :content="$t('code.functionNameExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genType">
          <template #label>
            {{ $t('code.codeMethod') }}
            <el-tooltip :content="$t('code.codeMethodExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-radio v-model="info.genType" value="0">{{ $t('code.zip') }}
          </el-radio>
          <el-radio v-model="info.genType" value="1">{{ $t('code.custom') }}
          </el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <template #label>
            {{ $t('code.previousMenu') }}
            <el-tooltip :content="$t('code.previousMenuExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <tree-select v-model:value="info.parentMenuId" :options="menuOptions" :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }" placeholder="" />
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="info.genType == '1'">
        <el-form-item prop="genPath">
          <template #label>
            {{ $t('code.custom') }}
            <el-tooltip :content="$t('code.customExample')" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.genPath">
            <template #append>
              <el-dropdown>
                <el-button type="primary">
                  {{ $t('code.nearestPath') }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="info.genPath = '/'"> {{ $t('code.defaultBasePath') }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <template v-if="info.tplCategory == 'tree'">
      <h4 class="form-header">{{ $t('code.otherInformation') }}</h4>
      <el-row v-show="info.tplCategory == 'tree'">
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('code.treeCodeField') }}
              <el-tooltip :content="$t('code.treeCodeFieldExample')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select filterable v-model="info.treeCode" placeholder="">
              <el-option v-for="(column, index) in info.columns" :key="index" :label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('code.treeParentCodeField') }}
              <el-tooltip :content="$t('code.treeParentCodeFieldExample')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select filterable v-model="info.treeParentCode" placeholder="">
              <el-option v-for="(column, index) in info.columns" :key="index" :label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('code.treeNameField') }}
              <el-tooltip :content="$t('code.treeNameFieldExample')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select filterable v-model="info.treeName" placeholder="">
              <el-option v-for="(column, index) in info.columns" :key="index" :label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <template v-if="info.tplCategory == 'sub'">
      <h4 class="form-header">{{ $t('code.relatesInformation') }}</h4>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('code.associatedSubTable') }}
              <el-tooltip :content="$t('code.associatedSubTableExample')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select filterable v-model="info.subTableName" placeholder="" @change="subSelectChange">
              <el-option v-for="(table, index) in tables" :key="index" :label="table.tableName + '：' + table.tableComment" :value="table.tableName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label>
              {{ $t('code.foreignKey') }}
              <el-tooltip :content="$t('code.foreignKeyExample')" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
            </template>
            <el-select filterable v-model="info.subTableFkName" placeholder="">
              <el-option v-for="(column, index) in subColumns" :key="index" :label="column.columnName + '：' + column.columnComment" :value="column.columnName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>

  </el-form>
</template>

<script setup>
import { listMenu } from "@/api/system/menu";

const subColumns = ref([]);
const menuOptions = ref([]);
const { proxy } = getCurrentInstance();

const props = defineProps({
  info: {
    type: Object,
    default: null
  },
  tables: {
    type: Array,
    default: null
  }
});

// 表单校验
const rules = ref({
  tplCategory: [{ required: true, message: proxy.i18n.code.templateNotNull, trigger: "blur" }],
  packageName: [{ required: true, message: proxy.i18n.code.packageNotNull, trigger: "blur" }],
  moduleName: [{ required: true, message: proxy.i18n.code.moduleNotNull, trigger: "blur" }],
  businessName: [{ required: true, message: proxy.i18n.code.businessNotNull, trigger: "blur" }],
  functionName: [{ required: true, message: proxy.i18n.code.functionNotNull, trigger: "blur" }]
});

function subSelectChange (value) {
  props.info.subTableFkName = "";
}

function tplSelectChange (value) {
  if (value !== "sub") {
    props.info.subTableName = "";
    props.info.subTableFkName = "";
  }
}

function setSubTableColumns (value) {
  for (var item in props.tables) {
    const name = props.tables[item].tableName;
    if (value === name) {
      subColumns.value = props.tables[item].columns;
      break;
    }
  }
}

/** 查询菜单下拉树结构 */
function getMenuTreeselect () {
  listMenu().then(response => {
    menuOptions.value = proxy.handleTree(response.data, "menuId");
  });
}

watch(() => props.info.subTableName, val => {
  setSubTableColumns(val);
});

watch(() => props.info.tplWebType, val => {
  if (val === '') {
    props.info.tplWebType = "element-plus";
  }
});

getMenuTreeselect();
</script>
